<template>
	<view
		:style="'order:'+item.order+';'+item.css"
		class="box-group-tree">
		<template v-if="groupTreeStatus === 'success'">
			<view class="for" v-for="item in groupTree">
				<!-- 一层 -->
				<view class="one-title">
					<view class="one-title-left">
						<view></view>
						<text>{{item.name}}</text>
					</view>
					<view class="one-title-right">
						<text class="iconfont icon-arrow-down-bold"></text>
					</view>
				</view>
				<!-- 二层 -->
				<view class="two-box">
					<view
						@click="$_to('group/detail?gid=' + group.gid)"
						class="_for"
						v-for="group in item.groups">
						<view class="cover" v-if="group.cover">
							<image :src="group.cover" mode="widthFix"></image>
						</view>
						<view class="_for-center">
							<view class="_for-center-top">
								<view>{{group.name}}</view>
								<template v-if="!group.subgroupCount">
									<view class="_text">{{group.postCount}}{{$t('newPosts')}}</view>
									<view class="_text">{{group.commentCount}}{{$t('contentCommentCountDesc')}}</view>
								</template>
							</view>
							<view class="_for-center-bottom">
								<view
									class="_description"
									v-if="group.description">
									{{group.description}}
								</view>
								<view
									class="_for-center-bottom-sub"
									v-if="group.subgroupCount">
									<view
										style="color: #586a9c;"
										v-for="subGroup in group.groups">
										{{subGroup.name}}<text>({{subGroup.postCount}})</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="groupTreeStatus === 'loading'">
			<view class="_loading">
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
			</view>
		</template>
		<template v-if="groupTreeStatus === 'empty'">
			<global-empty></global-empty>
		</template>
	</view>
</template>

<script>
	export default {
		name:"box-group-tree",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				groupTree:[],
				groupTreeStatus:"loading"
			};
		},
		mounted(){
			this.getGroupTree();
		},
		methods: {
			getGroupTree(){
				this.$_request(
					"GET","/api/fresns/v1/group/tree",
					{
						"filterType":"whitelist",
						"filterKeys":"name,groups,gid,cover,postCount,commentCount,subgroupCount,description"
					},
					(res) => {
						if(res.data.data.length){
							this.groupTree = res.data.data;
							this.groupTreeStatus = "success";
						}else{
							this.groupTreeStatus = "empty";
						}
					}
				)
			},
		}
	}
</script>

<style lang="scss" scoped>
.box-group-tree{
	.for{
		background: #FFF;
		padding: 25rpx;
		margin-top: 25rpx;
		.one-title{
			display: flex;
			align-items: center;
			justify-content:space-between;
			border-bottom: 1px solid $background;
			padding-bottom: 25rpx;
			.one-title-left{
				display: flex;
				align-items: center;
				line-height: 28rpx;
				view{
					width: 10rpx;
					height: 28rpx;
					background: $blue;
					margin-right: 10rpx;
					border-radius: 100rpx;
				}
				text{
					font-size: 28rpx;
				}
			}
			.one-title-right{
				display: flex;
				align-items: center;
				line-height: 28rpx;
				text{
					font-size: 28rpx;
					color: $placeholder;
				}
			}
		}
		.two-box{
			._for{
				display: flex;
				padding: 25rpx 0;
				border-bottom: 1px dotted $background;
				.cover{
					width: 80rpx;
					height: 80rpx;
					overflow: hidden;
					flex-shrink: 0;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}
				._for-center{
					display: flex;
					justify-content: center;
					flex-flow: column;
					flex: 1;
					._for-center-top{
						display: flex;
						align-items: center;
						view{
							font-size: 28rpx;
							line-height: 28rpx;
						}
						._text{
							font-size: 22rpx;
							color: $placeholder;
							padding-left: 10rpx;
						}
					}
					._for-center-bottom{
						display: flex;
						flex-flow: column;
						._for-center-bottom-sub{
							display: flex;
							align-items: center;
							margin-top: 15rpx;
							view{
								font-size: 22rpx;
								line-height: 22rpx;
								color: $placeholder;
								padding-right: 15rpx;
								display: flex;
								align-items: center;
								text{
									font-size: 12rpx;
									padding-left: 2rpx;
									color: $placeholder;
								}
							}
						}
						._description{
							margin-top: 15rpx;
							font-size: 22rpx;
							color: $placeholder;
							line-height: 28rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
					}
				}
			}
			._for:last-child{
				border-bottom: 0;
				padding-bottom: 0;
			}
		}
	}
	._loading{
		background: #FFF;
		margin-top: 25rpx;
		padding: 25rpx 25rpx 1rpx 25rpx;
		.skeleton-screen{
			width: 100%;
			height: 80rpx;
			margin-bottom: 25rpx;
		}
	}
}
</style>